<template>
<div class="shop flex-column">
    <div class="header flex-center-space-between">
        <div></div>
        <van-button type="danger" size="mini" style="width: 70px" round plain @click="del">清空足迹</van-button>
    </div>
    <div class="shop-box overflow-y">
        <template v-if="list.length === 0">
            <van-empty image="search" description="暂无浏览历史" />
        </template>
        <template v-else>
            <div class="item " v-for="(item, index) in list" :key="index">
                <header class="header-date text-left blod">{{ item.date }}</header>
                <RouterLink class="shop-box-data flex-1 flex-center" v-for="(item2, index2) in item.childs" :key="index2" :to="`/product?id=${item2.goods_id}`">
                    <img :src="item2.goods.img[0] || ''" alt="">
                    <div class="msg flex-1 text-left ">
                        <div class=" blod name van-multi-ellipsis--l2">
                            {{ item2.goods.name }}
                        </div>
                        <div class="text-gray font-size-12">
                            <div class="flex-center padd">
                                <div class="flex-1">品牌：{{ item2.goods.brand_name || '' }}</div>
                                <div class="flex-1"><van-icon name="location-o" />{{ item2.goods.province }}</div>
                            </div>
                            <div class="padd">
                                库存数量：{{ item2.goods.stock }}套
                            </div>
                        </div>
                        <div class="tag flex-center-space-between font-size-12" style="margin-top: 0.1rem">
                            <van-tag type="primary" class="tag-" plain>{{ item2.goods.ltd_level_name }}</van-tag>
                            <span class="price blod">{{ item2.goods.price }}</span>
                        </div>
                    </div>
                </RouterLink>
            </div>

        </template>
    </div>
</div>
</template>

<script>
export default {
    data () {
        return {
            list: [
                // {
                //     date: '7月2日',
                //     childs: [
                //         { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 0 },
                //         { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 1 },
                //         // { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 2 },
                //         // { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 3 }
                //     ]
                // },
                // {
                //     date: '7月3日',
                //     childs: [
                //         { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 0 },
                //         // { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 1 },
                //         // { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 2 },
                //         // { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 3 }
                //     ]
                // }
            ]
        }
    },
    methods: {
        del () {
            this.$dialog.confirm({ title: '清空', message: '确认清空所有浏览足迹?' }).then(() => {
                this.$buyer.deleteGoodsFootprint().then(() => {
                    this.getFootprintsData()
                })
            })
        },

        typeMode (v) {
            switch (v) {
                case 0:
                    return ['danger', '渠道商']
                case 1:
                    return ['primary', '经销商']
                case 2:
                    return ['success', '生产厂家']
                case 3:
                    return ['primary', '自营']
            }
        },

        getFootprintsData () {
            // 获取 足迹 浏览历史
            this.$buyer.getBrowsingHistory().then(res => {
                // console.log(res)
                let obj = []
                Object.keys(res.data.list).forEach(key => {
                    // 过滤到积分商品
                    const list = res.data.list[key].filter(v => {
                        return v.goods && v.goods.type === 0
                    })
                    obj.push({ date: key, childs: list })
                    // obj.push({ date: key, childs: res.data.list[key].filter(v => v.goods.type === 0) })
                })
                // console.log(obj)
                this.list = obj
            })
        }
    },
    created () {
        this.getFootprintsData()
    }
}
</script>

<style lang="less" scoped>
.header {
    height: 50px;
    padding: 0 20px;
}

.item {
    // height: 140px;
    background-color: #fff;
    margin-bottom: 20px;
    .shop-box-data {
        display: inline-flex;
        box-sizing: border-box;
        height: 120px;
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
        img {
            height: 100px;
            min-width: 60px;
            width: 100px;
        }
        .msg {
            padding-left: 10px;
            width: 100%;
            flex: 1;
            .name {
                width: 100%;
            }
        }
    }
    .tag- {
        border-radius: 4px;
        margin-right: 10px;
    }
}

.padd {
    padding: 2px 0;
}

.header-date {
    line-height: 30px;
    padding: 0 20px;
}

</style>
